<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .a{
            margin: 0 auto;
            background-color: rgba(0,0,0,0.5);
        }
        li{
            font-size: 18px;
            background-color: rgba(0,0,0,0.5);
            text-align: center;
            list-style: none;
            display: inline-block;
            padding-right: 50px;
            padding-left: 50px;
            float: left;
        }
        li.a2{
            height: 55px;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            color: #F5F9FC;
        }
        li.a2:hover{
            color: blue;
        }
        img{
            height: 50px;
        }
        a.a3{
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            width: 80px;
            height: 30px;
            border: 2px solid gold;
            border-radius: 50px 50px 50px 50px;
            color: gold;
        }
        a.a4{
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            width: 180px;
            height: 35px;
            border-radius: 50px 50px 50px 50px;
            color:rgba(0,0,0,0.5);
            background-color: gold;
        }

    </style>
</head>
<body>
<div class="a">
<ul>
    <li class="a1"><img src="img/logo.png"></li>
    <li class="a2">功能特权</li>
    <li class="a2">游戏特权</li>
    <li class="a2">生活特权</li>
    <li class="a2">会员活动</li>
    <li class="a2">成长体系</li>
    <li class="a2">年费专区</li>
    <li class="a2">超级会员</li>
    <li class="a2"><a class="a3">登录</a></li>
    <li class="a2"> <a class="a4">开通超级会员</a></li>
    </ul>
</div>

</body>
</html>